<template>
    <div>
        <van-nav-bar left-arrow :title="type" @click-left=$router.go(-1) :fixed='true' />
    </div>
    <div v-for="item in productlist" class="bigbox" @click="goToDetail(item.proid)" v-show="!exhibition">
        <div class="imgs">
            <img :src=item.img1 alt="">
        </div>
        <div class="mesgs">
            <div>
                {{ item.proname }}
            </div>
            <div class="prices">
                <span>￥{{ item.originprice }}</span>
            </div>
            <div class="sold">
                <div>
                    销量{{ item.sales }}
                </div>
                <div>
                    库存{{ item.stock }}
                </div>
            </div>
        </div>
    </div>
    <div v-show="exhibition" class="imgpart">
        <img src="@/assets/images/emptyx2.png" alt="">
        <p>没有符合条件的商品</p>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref, type Ref } from 'vue';
import { GetSearchList } from '@/api/api'


const router = useRouter()
const productlist: Ref<any[]> = ref([])
const route = useRoute()
const num = ref(1)
const limitNum = ref(1000)
const exhibition = ref(false)
const type: any = route.query.type


const goToDetail = (id: any) => {
    router.push({
        path: '/detail',
        query: { id: id, }
    })
}

const OnSearch = async () => {
    const params = {
        count: num.value,
        limitNum: limitNum.value,
        keyword: type
    }
    const res = await GetSearchList(params)
    // console.log(res);
    if (res.data.code === '200') {
        productlist.value = res.data.data
    } else {
        exhibition.value = true
    }
}

onMounted(() => {
    OnSearch()
})
</script>

<style lang="scss" scoped>
.bigbox {
    display: flex;
    height: 130px;
    margin: 20px 0;
    font-size: 12px;
    margin-top: 50px;

    .imgs {
        width: 150px;

        img {
            height: 100%;
            width: 100%;
            margin: 0 auto;
        }
    }
}

.mesgs {
    width: 200px;
    padding-left: 15px;
    position: relative;

    .sold {
        width: 80%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 10px;
    }

    .prices {
        position: absolute;
        bottom: 30px;
        display: flex;
        justify-content: space-between;

        span {
            color: #FB7299;
            font-size: 20px;
        }
    }
}

.imgpart {
    width: 100%;
    margin-top: 50px;
    text-align: center;

    img {
        display: block;
        margin: 0 auto;
    }
}
</style>